<template>
  <div id="container">
    <el-container>
      <el-header height="">
        <div class="logo-img">
          <span>新闻发布系统</span>
        </div>
        <div class="home-avatar">
          你好 {{ userInfo.username }}
          <el-button
            class="loginout"
            type="text"
            style="color: white; margin-left: 15px"
            @click="loginout"
            >退出系统</el-button
          >
        </div>
      </el-header>
      <el-container>
        <el-aside width="">
          <Menu :user_id="userInfo.id" />
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { useRouter } from "vue-router";
import { reactive, toRefs } from "vue";
import Menu from "./menu.vue";
import { UserService } from "@/api/user";

export default {
  components: { Menu },
  setup() {
    const router = useRouter();
    let data = reactive({
      userInfo: { username: "", user_id: -1 },
      loginout: () => {
        router.push("/login");
      },
    });
    UserService.info().then((res) => {
      if (res.data.code === 0) {
        data.userInfo = res.data.data;
      }
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="less">
.loginout:hover {
  color: #1357d4;
  span:hover {
    color: #ff5100a9 !important;
  }
}
</style>
<style scoped lang="less">
@import "../../../index.less";
#container {
  .el-header {
    background-color: #184280;
    color: #333;
    line-height: @header-height;
    height: @header-height;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo-img {
      height: 100%;
      color: white;
      font-weight: 1000;
      font-size: 20px;
      span {
        margin-right: 10px;
      }
    }
    .home-avatar {
      display: flex;
      justify-items: center;
      color: white;
      .home-user-button {
        background-color: unset;
        color: white;
        border: #d3dce6 solid 1px;
      }
    }
  }

  .el-aside {
    background-color: #053794;
    color: #333;
    height: calc(100vh - @header-height);
    overflow: auto;
  }

  .el-main {
    padding-bottom: 0;
    margin-bottom: 0;
    height: calc(100vh - @header-height);
    overflow: hidden;
  }
  .el-divider--horizontal {
    margin: 0;
  }
}
</style>